<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
	<link rel="stylesheet" href="/css/index.css"/>
	<link rel="stylesheet" href="/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/cropper/cropper.css">
	<title>易书网</title>
</head>
<style>
	.help-main {
		padding: 0;
	}
	select{
		padding: 3px 10px;
	}
</style>
<body >


<!--引入 尾部片段-->
<div  th:replace="mall/common/mall_common :: header"></div>
>

<div class="help-wrap">
	<div class="container clearfix">
		<div class="bread">当前位置：
			<a href="index.html">首页</a> >
			<a href="member.html">个人中心</a> >
			<a href="bought.html">发布书籍</a>
		</div>
		<div class="help-l fl">
			<div class="help-item">
				<div class="help-item-title">个人中心
					<a href="javascript:void(0)" class="abs"></a>
				</div>
				<div class="help-item-list">
					<ul>
						<li><a href="member.html">个人信息</a></li>
						<li><a href="password.html">修改密码</a></li>
					</ul>
				</div>
			</div>
			<div class="help-item">
				<div class="help-item-title">书籍管理
					<a href="javascript:void(0)" class="abs"></a>
				</div>
				<div class="help-item-list">
					<ul>
						<li><a href="published.html">已发布</a></li>
						<li><a href="bought.html">已买书籍</a></li>
						<li><a href="publish.html">发布书籍</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="help-r fr">
			<div class="help-item-title">发布书籍</div>
			<div class="help-main">
				<form action="" method="post" id="blogForm">
					<div class="product-edit-item clearfixc">
						<div class="product-edit-item-l fl">
							<div class="fr"><i class="middle">*</i>图书分类1：</div>
						</div>
						<div class="product-edit-item-r fl ">
								<select name="" >
									<option value="">图书所属学校</option>
									<option value="">江西师范大学</option>
									<option value="">清华大学</option>
									<option value="">北京大学</option>
									<option value="">南开大学</option>
								</select>
						</div>
					</div>
					<div class="product-edit-item clearfixc">
						<div class="product-edit-item-l fl">
							<div class="fr"><i class="middle">*</i>图书分类2：</div>
						</div>
						<div class="product-edit-item-r fl">
								<select name=""  >
									<option value="">图书所属学院</option>
									<option value="">传播学院</option>
									<option value="">文学院</option>
									<option value="">外国语学院</option>
									<option value="">软件学院</option>
								</select>
						</div>
					</div>
					<div class="product-edit-item clearfixc">
						<div class="product-edit-item-l fl">
							<div class="fr"><i class="middle">*</i>图书分类3：</div>
						</div>
						<div class="product-edit-item-r fl">
								<select name=""  >
									<option value="">图书所属专业</option>
									<option value="">教育技术学</option>
									<option value="">传播学</option>
									<option value="">广告学</option>
									<option value="">艺术学</option>
								</select>
						</div>
					</div>
					<div class="product-edit-item clearfixc">
						<div class="product-edit-item-l fl ">
							<div class="fr"><i class="middle">*</i>图书分类4：</div>
						</div>
						<div class="product-edit-item-r fl">
								<select name=""  >
									<option value="">图书所属年级</option>
									<option value="">大一</option>
									<option value="">大二</option>
									<option value="">大三</option>
									<option value="">大四</option>
								</select>
						</div>
					</div>
					<div class="product-edit-item clearfix">
						<div class="product-edit-item-l fl clearfixc">
							<div class="fr"><i class="middle">*</i>图书名称：</div>
						</div>
						<div class="product-edit-item-r fl">
							<input type="text" value="福尔摩斯探案全集" style="width: 410px">
							<p >图书标题名称长度至少3个字符，最长50个汉字</p>
						</div>
					</div>
					<div class="product-edit-item clearfix">
						<div class="product-edit-item-l fl clearfixc">
							<div class="fr"><i class="middle">*</i>图书价格：</div>
						</div>
						<div class="product-edit-item-r fl">
							<input type="text" style="width: 60px"><em class="add-on"><i class="icon-renminbi"></i></em>
							--打折价:
							<input type="checkbox" name="close" lay-skin="switch" lay-filter="switchTest" id="switchTest" lay-text="ON|OFF">
							<input id="discount" type="text" style="width: 60px" disabled ><em class="add-on"><i class="icon-renminbi"></i></em>
							<p >价格必须是0.01~9999999之间的数字，且不能高于市场价。<br>此价格为图书实际销售价格，如果图书存在规格，该价格显示最低价格。</p>
						</div>
					</div><div class="product-edit-item clearfix">
						<div class="product-edit-item-l fl clearfixc">
							<div class="fr"><i class="middle">*</i>图书数量：</div>
						</div>
						<div class="product-edit-item-r fl">
							<input type="text"  style="width: 60px"><em class="add-on"><i class="">本</i></em>
						</div>
					</div>
					<div class="product-edit-item clearfix">
						<div class="product-edit-item-l fl clearfixc">
							<div class="fr"><i class="middle">*</i>图书描述：</div>
						</div>
						<div class="product-edit-item-r fl">
							<textarea name=""  cols="30" rows="10"></textarea>
							<p >请如实描述你所发布书籍的详细情况，以方便其他会员购买！</p>
						</div>
					</div>
					<div class="product-edit-item clearfix">
						<div class="product-edit-item-l fl clearfixc">
							<div class="fr"><i class="middle">*</i>上传封面：</div>
						</div>
						<div class="product-edit-item-r fl">
							<div id="preview">
								<img width="228" id="showImg" height="128"  src="images/siji.jpg">
							</div>
							<button type="button"
									class="layui-btn layui-btn-sm layui-btn-normal"
									id="formCoverUpload">选择图片</button>
							<p >请上传图书封面，尽量保持图片清晰</p>
						</div>
					</div>
					<div class="product-edit-item clearfix">
						<div class="product-edit-item-l fl clearfixc" style="border: none;border-top:1px solid #E6E6E6">
						</div>
						<div class="product-edit-item-r fl" style="border: none;border-top:1px solid #E6E6E6">
						</div>
					</div>
					<div class="upload"><label><input type="submit" value="点击发布"></label></div>
				</form>





			</div>
		</div>
	</div>
</div>





<!--引入 尾部片段-->
<div  th:replace="mall/common/mall_common :: footer"></div>


<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.4.1.js"></script>
<script src="/cropper/cropper.js"></script>
<script src="/js/main.js"></script>
<script>
    layui.config({
        base: 'cropper/layui_modules/' //你存放新模块的目录，注意，不是layui的模块目录
    }).use('cropperUpload'); //加载入口

    let formCoverUpload;
    let coverupload;
    layui.use([ 'layer', 'form', 'element', 'laydate', 'cropperUpload', 'layedit', 'laypage', 'table' ],function () {
        let layer = layui.layer,
            form = layui.form;
        let element = layui.element;
        let laydate = layui.laydate;
        let cropperUpload = layui.cropperUpload;
        let layedit = layui.layedit;
        let laypage = layui.laypage;

        let table = layui.table;
        //表单封面裁剪图片组件
        formCoverUpload = cropperUpload.init({
            select : "#formCoverUpload",
            aspectRatio : 2 / 3,
            imgWidth : 300,
            imgHeight : 500,
            formDataId : "#blogForm",
            success : function(base64Img,blog,that) { //base64Img  base64格式图片    blog  二进制图
                $("#showImg").attr("src", base64Img)
            }
        })

        //监听指定开关
        $('#switchTest').click( function(){

            this.checked ? $("#discount").attr("disabled",false) : $("#discount").attr("disabled",true)

        })

    })

</script>

</body>
</html>